import React from 'react';
import { SphereImageGallery } from '../../src';

// 示例图片URL数组
const exampleImages = [
  'https://picsum.photos/300/300?random=1',
  'https://picsum.photos/300/300?random=2',
  'https://picsum.photos/300/300?random=3',
  'https://picsum.photos/300/300?random=4',
  'https://picsum.photos/300/300?random=5',
  'https://picsum.photos/300/300?random=6',
  'https://picsum.photos/300/300?random=7',
  'https://picsum.photos/300/300?random=8',
  'https://picsum.photos/300/300?random=9',
  'https://picsum.photos/300/300?random=10',
  'https://picsum.photos/300/300?random=11',
  'https://picsum.photos/300/300?random=12',
  'https://picsum.photos/300/300?random=13',
  'https://picsum.photos/300/300?random=14',
  'https://picsum.photos/300/300?random=15',
];

const SphereImageGalleryDemo: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 组件介绍 */}
        <div className="mb-12">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">SphereImageGallery 3D球形图片展示组件</h2>
          <p className="text-lg text-gray-600 mb-6">
            一个功能强大的3D球形图片展示组件，支持鼠标拖拽旋转和自动旋转效果，图片会自动均匀分布在球体表面。
          </p>
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex">
              <div className="flex-shrink-0">
                <svg className="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                </svg>
              </div>
              <div className="ml-3">
                <h3 className="text-sm font-medium text-blue-800">
                  提示
                </h3>
                <div className="mt-2 text-sm text-blue-700">
                  <p>该组件基于 React、TypeScript 和 CSS 3D变换技术开发，支持响应式设计和自定义配置。</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 基础用法 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">基础用法</h2>
          <p className="text-gray-600 mb-6">
            使用 <code className="bg-gray-100 px-2 py-1 rounded text-sm">SphereImageGallery</code> 组件创建基本的3D球形图片展示效果。
          </p>
          
          <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
            <div className="flex items-center justify-center">
              <SphereImageGallery 
                images={exampleImages}
                radius={250}
                imageSize={120}
                autoRotateSpeed={0.3}
                className="h-96 w-full"
              />
            </div>
          </div>

          {/* 代码示例 */}
          <div className="bg-gray-900 rounded-lg p-4">
            <pre className="text-sm text-gray-300 overflow-x-auto">
            <code>{`import { SphereImageGallery } from 'cxl-react-components';

const images = [
  'https://picsum.photos/300/300?random=1',
  'https://picsum.photos/300/300?random=2',
  // ... 更多图片URL
];

<SphereImageGallery 
  images={images}
  radius={250}
  imageSize={120}
  autoRotateSpeed={0.3}
/>`}</code>
            </pre>
          </div>
        </div>

        {/* 不同配置演示 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">不同配置演示</h2>
          <p className="text-gray-600 mb-6">
            展示不同参数配置下的效果。
          </p>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* 少量图片自动重复 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">少量图片自动重复</h3>
              <p className="text-sm text-gray-600 mb-4">minImages={12}，图片数量不足时自动重复</p>
              <div className="flex items-center justify-center">
                <SphereImageGallery 
                  images={exampleImages.slice(0, 3)}
                  minImages={12}
                  radius={180}
                  imageSize={80}
                  autoRotateSpeed={0.1}
                  className="h-64 w-full"
                />
              </div>
            </div>

            {/* 大球体展示 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">大球体展示</h3>
              <p className="text-sm text-gray-600 mb-4">radius={300}，imageSize={100}</p>
              <div className="flex items-center justify-center">
                <SphereImageGallery 
                  images={exampleImages}
                  radius={300}
                  imageSize={100}
                  autoRotateSpeed={0.5}
                  className="h-64 w-full"
                />
              </div>
            </div>

            {/* 快速旋转 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">快速旋转</h3>
              <p className="text-sm text-gray-600 mb-4">autoRotateSpeed={1.0}</p>
              <div className="flex items-center justify-center">
                <SphereImageGallery 
                  images={exampleImages.slice(0, 8)}
                  radius={200}
                  imageSize={90}
                  autoRotateSpeed={1.0}
                  className="h-64 w-full"
                />
              </div>
            </div>

            {/* 静止模式 */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-semibold mb-4 text-gray-900">静止模式</h3>
              <p className="text-sm text-gray-600 mb-4">autoRotateSpeed={0}</p>
              <div className="flex items-center justify-center">
                <SphereImageGallery 
                  images={exampleImages.slice(0, 6)}
                  radius={150}
                  imageSize={70}
                  autoRotateSpeed={0}
                  className="h-64 w-full"
                />
              </div>
            </div>
          </div>
        </div>

        {/* API 文档 */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">API 文档</h2>
          
          {/* SphereImageGallery Props */}
          <div className="bg-white rounded-lg shadow-sm border">
            <div className="px-6 py-4 border-b">
              <h3 className="text-lg font-semibold text-gray-900">SphereImageGallery Props</h3>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性名</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">默认值</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">images</td>
                    <td className="px-6 py-4 text-sm text-gray-500">图片URL数组</td>
                    <td className="px-6 py-4 text-sm text-gray-500">string[]</td>
                    <td className="px-6 py-4 text-sm text-gray-500">—</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">radius</td>
                    <td className="px-6 py-4 text-sm text-gray-500">球体半径（像素）</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">200</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">imageSize</td>
                    <td className="px-6 py-4 text-sm text-gray-500">图片尺寸（像素）</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">100</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">minImages</td>
                    <td className="px-6 py-4 text-sm text-gray-500">最小图片数量</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">12</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">autoRotateSpeed</td>
                    <td className="px-6 py-4 text-sm text-gray-500">自动旋转速度（0为禁用）</td>
                    <td className="px-6 py-4 text-sm text-gray-500">number</td>
                    <td className="px-6 py-4 text-sm text-gray-500">0.2</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">className</td>
                    <td className="px-6 py-4 text-sm text-gray-500">自定义类名</td>
                    <td className="px-6 py-4 text-sm text-gray-500">string</td>
                    <td className="px-6 py-4 text-sm text-gray-500">—</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* 使用说明 */}
        <div className="bg-blue-50 rounded-lg p-6">
          <h3 className="text-lg font-semibold mb-4 text-blue-800">使用说明</h3>
          <div className="text-sm text-blue-700 space-y-2">
            <p><strong>交互功能</strong></p>
            <ul className="list-disc list-inside space-y-1 ml-4">
              <li><strong>鼠标拖拽旋转</strong>：按住鼠标左键拖拽可以旋转球体</li>
              <li><strong>自动旋转</strong>：组件会自动缓慢旋转，可通过 autoRotateSpeed 控制速度</li>
              <li><strong>图片重复</strong>：当图片数量不足 minImages 时，会自动重复图片来形成完整球体</li>
            </ul>
            <p className="mt-4"><strong>参数配置</strong></p>
            <ul className="list-disc list-inside space-y-1 ml-4">
              <li><strong>radius</strong>：控制球体大小，值越大球体越大</li>
              <li><strong>imageSize</strong>：控制图片显示尺寸</li>
              <li><strong>minImages</strong>：设置形成完整球体所需的最小图片数量</li>
              <li><strong>autoRotateSpeed</strong>：0为禁用自动旋转，值越大旋转越快</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SphereImageGalleryDemo;